<template>
  <div class="statistics-cards">
    <!-- 学生学习进度总览 -->
    <div class="stat-card">
      <div class="card-header">
        <i class="fas fa-chart-line" aria-hidden="true"/>
        <h3>学生学习进度总览</h3>
      </div>
      <div class="card-content">
        <ul>
          <li><span>平均课程达成率</span><span
            class="value"
          >{{ CommonUtil.moveDecimalRight(statisticsData.achievementRate, 2) }}%</span></li>
          <li><span>本周活跃学生</span><span class="value">{{ statisticsData.numberOfActiveStudentsThisWeek }}人</span>
          </li>
          <li><span style="min-width: 70px;">课时 TOP3</span><span
            v-for="(item,index) in statisticsData.classTopThreeList"
            :key="index"
            class="platform-end platform-pep"
          >{{ item.name }}</span></li>
        </ul>
      </div>
    </div>

    <!-- 收入与课时统计 -->
    <div class="stat-card">
      <div class="card-header">
        <i class="fas fa-chart-pie" aria-hidden="true"/>
        <h3>收入与课时统计</h3>
      </div>
      <div class="card-content">
        <ul>
          <li><span>本月已上课</span><span class="value">{{ statisticsData.thisMonthsCourses }}节</span></li>
          <li><span>收入</span><span class="value">¥ -</span></li>
          <li><span>续费率</span><span class="value">{{
              CommonUtil.moveDecimalRight(statisticsData.renewalRate, 2)
            }}%</span></li>
        </ul>
      </div>
    </div>

    <!-- 学生情况变化 -->
    <div class="stat-card">
      <div class="card-header">
        <i class="fas fa-users" aria-hidden="true"/>
        <h3>学生情况变化</h3>
      </div>
      <div class="card-content">
        <ul>
          <li><span>本月新增学生</span><span class="value">{{ statisticsData.numberOfNewStudentsAddedThisMonth }}</span>
          </li>
          <li><span>即将到期</span>
            <span
              class="value"
            >{{ statisticsData.studentsWhoAreAboutToExpireList?statisticsData.studentsWhoAreAboutToExpireList.length:0 }}</span></li>
          <li><span>留存率</span><span class="value">{{
              CommonUtil.moveDecimalRight(statisticsData.retentionRate, 2)
            }}%</span></li>
        </ul>
      </div>
    </div>

    <!-- 即将到期学生 -->
    <div class="stat-card">
      <div class="card-header">
        <i class="fas fa-users" aria-hidden="true"/>
        <h3>即将到期学生</h3>
        <span
          class="badge"
        >{{
            statisticsData.studentsWhoAreAboutToExpireList ? statisticsData.studentsWhoAreAboutToExpireList.length : 0
          }}</span>
      </div>
      <div class="card-content">
        <ul v-if="studentsWhoAreAboutToExpireArr&&studentsWhoAreAboutToExpireArr.length > 0">
          <li v-for="(item,index) in studentsWhoAreAboutToExpireArr" :key="index">
            <span>{{ item.name }}</span><span
            class="platform-end"
          >剩余
            {{
              Number(item.remainingClassHours) % 1 === 0 ? parseInt(item.remainingClassHours) : Number(item.remainingClassHours)
            }}
            课时</span></li>
        </ul>
        <div v-else class="no-data-div">
          <p>暂无数据</p>
        </div>
      </div>
    </div>

    <!--  近期充值记录  -->
    <RechargeRecord
      :recharge-data="statisticsData.rechargeRecordList"
    />
  </div>
</template>

<script>
import RechargeRecord from '@/views/home/component/infoCompconent/RechargeRecord.vue'
import { homeStatistic } from '@/api/homePage'
import CommonUtil from '@/utils/CommonUtil'

export default {
  name: 'StatisticsCards',
  computed: {
    CommonUtil() {
      return CommonUtil
    }
  },
  components: { RechargeRecord },
  data() {
    return {
      statisticsData: {},
      // ========== 即将到期相关变量===============
      // 即将到期学生数组
      studentsWhoAreAboutToExpireArr: [],
      studentsWhoAreAboutToExpireCurrentIndex: 0, // 当前轮播起点
      studentsWhoAreAboutToExpireTimer: null // 定时器引用
    }
  },
  created() {
    this.init()
  },
  beforeDestroy() {
    // 组件销毁时清理定时器
    clearInterval(this.studentsWhoAreAboutToExpireTimer)
  },
  methods: {
    async init() {
      await this.loadData()

      // 初始化展示
      this.updateStudentsWhoAreAboutToExpireArrData()

      // 每5秒更新一次
      this.studentsWhoAreAboutToExpireTimer = setInterval(this.updateStudentsWhoAreAboutToExpireArrData, 5000)
    },
    async loadData() {
      this.statisticsData = await homeStatistic()
    },
    updateStudentsWhoAreAboutToExpireArrData() {
      if (!this.statisticsData.studentsWhoAreAboutToExpireList || this.statisticsData.studentsWhoAreAboutToExpireList.length === 0) return

      const total = this.statisticsData.studentsWhoAreAboutToExpireList.length
      const start = this.studentsWhoAreAboutToExpireCurrentIndex
      const end = start + 3

      if (end <= total) {
        this.studentsWhoAreAboutToExpireArr = this.statisticsData.studentsWhoAreAboutToExpireList.slice(start, end)
      } else {
        this.studentsWhoAreAboutToExpireArr = [
          ...this.statisticsData.studentsWhoAreAboutToExpireList.slice(start, total),
          ...this.statisticsData.studentsWhoAreAboutToExpireList.slice(0, end - total)
        ]
      }

      // studentsWhoAreAboutToExpireArr 去重
      this.studentsWhoAreAboutToExpireArr = this.studentsWhoAreAboutToExpireArr.filter((item, index, self) => {
        // 查找当前元素在数组中第一次出现的索引
        const firstIndex = self.findIndex(
          el => el.remainingClassHours === item.remainingClassHours &&
            el.name === item.name
        )
        // 只保留第一次出现的元素（索引与当前索引一致）
        return firstIndex === index
      })

      this.studentsWhoAreAboutToExpireCurrentIndex = (this.studentsWhoAreAboutToExpireCurrentIndex + 3) % total
    }
  }
}
</script>

<style scoped>
.statistics-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box;
}

.stat-card {
  flex: 1;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  padding: 15px 20px;
  box-sizing: border-box;
  min-width: 250px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.card-header h3 i {
  margin-right: 8px;
  color: #0084ff;
}

.card-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-content li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.card-content li span:first-child {
  color: #666;
}

.card-content li .value {
  font-weight: 500;
  color: #333;
}

.no-data-div p {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 16px;
}

/* 待处理数量徽章 */
.badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .statistics-cards {
    flex-direction: column;
  }
}

.platform-end {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 12px;
}

.platform-pep {
  background-color: #ff6a00;
  display: inline-block; /* 或 block，根据场景 */
  max-width: 50px; /* 控制最大宽度 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
  white-space: nowrap; /* 不换行 */
  vertical-align: middle; /* 可选，让文字居中对齐 */
}
</style>
